<template>
	<view>
		<navbar :title="$t('warehouse.title')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view class="select">
			<view class="commodity"  @click="change(0)" :class="{change:number==0}">
				{{$t('warehouse.commodity')}}
			</view>
			<view class="product" @click="change(1)" :class="{change:number==1}">
				{{$t('warehouse.redeemed')}}
			</view>
			<view class="product" @click="change(2)" :class="{change:number==2}">
				{{$t('warehouse.product')}}
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @up="upCallback" @init="mescrollInit" @down="downCallback"
			:down="downOption" :up="upOption">
			<view class="container" >
				<view class="white" v-for="(item, index) in list" @click="navTo('/pages/delivery/delivery', {wid: item.id})" v-if="number == 2">
					<view class="goods">
						<image :src="item.cover_image" mode="" style="width: 250rpx;
						height: 190rpx;margin: 30rpx 30rpx 50rpx;"></image>
						<view class="right">
							<view class="type u-line-2">
								{{item.good_name}}
							</view>
							<view class="detail">
								<view class="money">
									{{ $currency }}{{item.price}}
								</view>
								<view class="count">
									x1
								</view>
							</view>
						</view>
					</view>

					<template>
						<view class="line">
						</view>
						<view class="product-map">
							<u-image width="31rpx" height="37rpx" src="../../static/adress.png"
							style="margin:40rpx 19rpx 30rpx 30rpx ;"></u-image>
							<view class="name1">
								{{item.name}}
							</view>
							<view class="iphone1">
								{{item.mobile}}
							</view>
						</view>
						<view class="address1">
							{{item.province}},{{item.city}},{{item.county}},{{item.village}},{{item.address}}
						</view>
						<view class="tips" :class="{'gray':item.status == 3}">
							<view class="in" v-if="item.status == 0">
								{{$t("warehouse.in")}}
							</view>
							<view class="in" v-if="item.status == 1 || item.status == 2">
								{{$t("warehouse.delivered")}}
							</view>
							<view class="in" v-if="item.status == 3">
								{{$t("warehouse.received")}}
							</view>
						</view>
					</template>
				</view>
				<view class="white" v-for="(item, index) in list" v-if="number == 1 || number == 0">
					<view class="goods">
						<image :src="item.cover_image" mode="" style="width: 250rpx;
						height: 190rpx;margin: 30rpx 30rpx 50rpx;"></image>
						<view class="right">
							<view class="type u-line-2">
								{{item.good_name}}
							</view>
							<view class="detail">
								<view class="money">
									{{ $currency }}{{item.price}}
								</view>
								<view class="count">
									x1
								</view>
							</view>
						</view>
					</view>

					<template v-if="number == 0">
						<view class="confirm" @click="showAddress(item)">
							{{$t("warehouse.confirm")}}
						</view>
						<view class="cash" @click="exhangeItem(item)">
							{{$t("warehouse.cash", {price: $currency + item.buyback})}}
						</view>
					</template>

					<template v-if="number == 1">
						<view class="u-flex u-row-between" style="margin: 0 40rpx;padding-top: 30rpx;border-top:2rpx solid #ECECEC;">
							<view class="money">
								{{$currency + item.buyback}}
							</view>
							<view class="count">
								{{$t('warehouse.redeemed')}}
							</view>
						</view>
					</template>

				</view>
			</view>
		</mescroll-body>
		<view class="footer" v-if="number == 0">
			<view class="total">
				<view class="red">
					{{ $currency }}{{total}}
				</view>
				<view class="amount">
					{{$t("warehouse.amount")}}
				</view>
			</view>
			<view class="all" @click="exchangeAll">
				{{$t("warehouse.all")}}
			</view>
		</view>
		<u-popup v-model="show" mode="bottom"  border-radius="20"
		height="642">
				<scroll-view scroll-y="true" style="height: 450rpx;padding: 30rpx 0;" v-if="addressList.length">
					<view class="top" v-for="(item, index) in addressList" :key="item.id">
						<view class="map">
							<u-image width="31rpx" height="37rpx" src="../../static/adress.png"
							style="margin:0 19rpx 0 39rpx ;"></u-image>
							<view class="name">
								{{item.name}}
							</view>
							<view class="phone">
								{{item.mobile}}
							</view>
							<!-- <u-radio-group v-model="item.checked" class="checked" 
							width="36rpx">
								<u-radio shape="square"></u-radio>
							</u-radio-group> -->
							<view style="width: 32rpx;height:32rpx; margin-right:20rpx;" v-if="item.checked">
								<image src="@/static/image/address/checked_icon.png" style="width: 32rpx;height:32rpx;" mode="" />
							</view>
							<view style="width: 32rpx;height:32rpx; margin-right:20rpx;border: 2rpx solid #C8C8C8;background: #ECECEC;" @click="checkboxChange(item.id)" v-else></view>
						</view>
						<view style="padding: 0 90rpx;font-size:30rpx;word-break:break-all;margin-top:30rpx;">
							{{item.province}},{{item.city}},{{item.county}},{{item.village}},{{item.address}}
						</view>
					</view>
					<view class="bottom">
						<view class="cancel">
							{{$t("warehouse.cancel")}}
						</view>	
						<view class="the">
								{{$t("warehouse.the")}}
						</view>
					</view>
				</scroll-view>
				<view class="no-address" v-else>
					<image src="@/static/image/address/address.png" style="width: 63rpx;height:76rpx;margin:60rpx auto;" mode="" />
					<view>
						{{$t('delivery.noaddress')}}
					</view>
				</view>
				<view class="bottom">
					<template v-if="addressList.length">
						<view class="cancel" @click="show = false">
							{{$t("warehouse.cancel")}}
						</view>	
						<view class="the" @click="confirmAddress">
								{{$t("warehouse.the")}}
						</view>
					</template>
					<view class="the" style="width:100%;" @click="navTo('/pages/Addaddress/Addaddress')" v-else>
							{{$t("delivery.addaddress")}}
					</view>
				</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		list,
		gettotal,
		getaddress,
		verifyaddress,
		exchangemoney,
		exchangemoneyall
	} from '@/api/warehouse.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
	export default{
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				number: 0,
				show: false,
				value: 'false',
				list: [],
				total: 0,
				ware: {},
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
				addressList: []

			};
		},
		onLoad() {
			// this.loadList();
			
			this.loadTotal();
		},
		onShow() {
			this.loadAddress();
			try {
				this.mescroll.resetUpScroll()
			} catch (error) {
				
			}
		},
		computed: {
		},
		watch:{
			'number' (val) {
				this.mescroll.resetUpScroll()
			}
		},
		methods:{
			async upCallback(page) {
				let pageNum = (page.num - 1) * page.size
				let pageSize = page.size
				// withdrawlog({
				// 	page: 1,
				// }).then(res => {
				// 	let curPageData = res.list
				// 	let curPageLength = curPageData.length
			
				// 	let totalSize = +res.count
			
				// 	if (page.num == 1) this.addressList = []
				// 	this.addressList = this.addressList.concat(curPageData)
					
			
				// }).catch(err => {
					// 	this.mescroll.endErr()
				// })
				let result = await list({
					page: page.num,
					type: this.number
				})
				if (page.num == 1) this.list = []
				this.list = this.list.concat(result)
				let curPageLength = result.length
				this.mescroll.endSuccess(curPageLength)
			},
			async loadList() {
				let result = await list({
					page: 1,
					type: this.number
				})
				this.list = result;
			},
			async loadTotal() {
				let result = await gettotal()
				this.total = result;
			},
			async loadAddress() {
				let result = await getaddress();
				this.addressList = result;
				for (let i of this.addressList) {
					if (i.is_default) {
						i.checked = true;
					} else {
						i.checked = false;
					}
				}
				this.$store.dispatch('setAddress', result)
			},
			change(index){
				this.number = index;
				this.list = [];
				// this.total = 0;
				// this.loadList()
			},
			checkboxChange(item, val){
				for (let i of this.addressList) {
					if (i.id == item) {
						i.checked = true;
					} else {
						if (i.checked !== undefined) {
							i.checked = false;
						}
					}
					this.$forceUpdate()
				}
			},
			showAddress(item) {
				this.ware = item;
				this.show = true;
			},
			async exchangeAll() {
				if (this.total < 1) {
					return;
				}
				uni.showLoading({
				});
				let result = await exchangemoneyall({
					money: this.total
				})
				this.loadList();
				this.loadTotal();
				this.$store.dispatch('getUserInfo');
				uni.hideLoading();
			},
			async confirmAddress(val) {
				// uni.showLoading({
				// });
				let address_id = '';
				for (let i of this.addressList) {
					if (i.checked) {
						address_id = i.id
					}
				}
				let result = await verifyaddress({
					wid: this.ware.id,
					order_id: this.ware.order_id,
					address_id
				})
				this.loadList();
				this.loadTotal();
				this.show = false;
				uni.hideLoading();
			},
			async exhangeItem(val) {
				// uni.showLoading({
				// });
				let result = await exchangemoney({
					wid: val.id,
				})
				this.loadList();
				this.loadTotal();
				this.$store.dispatch('getUserInfo');
				uni.hideLoading();
			},
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss" scoped>
	.inactive {
		background: #AAA;
	}
	.select{
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		height: 84rpx;
		background: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		.commodity,.product{
			// width: 375rpx;
			color: #65676B;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;	
		}
		
		.change{
			font-size: 26rpx;
			border-bottom: 6rpx solid #C17C1C;
			color: #0F0F0EFF;
		}
		
	}
	
	.container{
		padding-bottom: 120rpx;
		.white{
			padding-bottom: 24rpx;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 30rpx;
			position: relative;
			.goods{
				display: flex;
				.right {
					flex: 1;
				}
				.type{
					font-size: 30rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #0F0F0E;
					margin: 0 30rpx;
					margin-top: 59rpx;
				}
				.detail{
					display: flex;
					margin-top: 16rpx;
					margin-right: 31rpx;
					margin-left: 30rpx;
					justify-content: space-between;
				}
			}
			.money{
				font-size: 36rpx;
				font-family: Alibaba PuHuiTi;//rubick;
				font-weight: 400;
				color: #FC3E32;
			}
			.count{
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
			}
			.confirm{
				width: 630rpx;
				height: 80rpx;
				background: $u-type-primary;
				border-radius: 10rpx;
				margin: auto;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #fff;
			}
			
			.cash{
				width: 630rpx;
				height: 80rpx;
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi;//rubick;
				font-weight: 400;
				color: $u-type-primary;
				margin: auto;
				margin-top: 30rpx;
				background: #0F0F0E;
				border-radius: 10rpx;
				line-height: 80rpx;
				text-align: center;
			}
			.tips{
				position: absolute;
				height: 140rpx;
				width: 140rpx;
				background-image: url(../../static/biaoqian/red.png);
				background-size: 100%;
				top: 0;
				.in{
					width:144rpx;
					height: 56rpx;
					font-size: 26rpx;
					font-family: Rubik;
					font-weight: 500;
					color: #FFFFFF;
					transform: translate(-28rpx,20rpx) rotate(-45deg);
					transform-origin: center;
					text-align: center;
					display: flex;
                    align-items: center;
                    justify-content: end;
                    flex-direction: column;
				}
			}
			.gray {
				background-image: url(../../static/biaoqian/gray.png);
				background-size: 100%;
			}
		}
		
	}
	
	.footer{
		width: 750rpx;
		height: 120rpx;
		background:  #FFFFFF;
		position:fixed;
		bottom:0;
		display: flex;
		.total{
			margin: 10rpx 81rpx 28rpx 40rpx;
			.red{
				font-size: 46rpx;
				font-family: Alibaba PuHuiTi;//rubick;
				font-weight: 400;
				color: #FC3E32;
			}
			.amount{
				font-size: 26rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
			}
			
		}
		.all{
			width: 380rpx;
			height: 90rpx;
			background: $u-type-primary;
			border-radius: 10rpx;
			text-align: center;
			line-height: 90rpx;
			margin-top: 15rpx;
		}
	}
	.top{
		margin-top: 9rpx;
		margin-right: 40rpx;
		.map{
			display: flex;
			align-items: center;
			margin-top: 58rpx;
			.name{
				// margin-top: 58rpx;
				margin-right: 30rpx;
				font-size: 34rpx;
				font-family: Rubik;
				font-weight: 500;
				color: #2B3039;
				line-height: 34rpx;
			}
			.phone{
				flex: 1;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
				line-height: 30rpx;
			}
			
			.checked{
				
				// margin-top: 51rpx;
				margin-left: auto;
				
			}
			
		}
		
		.msg{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			margin: 32rpx 62rpx 0 78rpx;
			
		}
	}
	.no-address {
		text-align: center;
		color: #AAAAAA;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		height: 450rpx;
		padding: 30rpx 0;
		justify-content: center;
	}
	.bottom{
		position: fixed;
		bottom: 30rpx;
		left: 40rpx;
		right: 40rpx;
		display: flex;
		justify-content: space-between;
		
		.cancel,.the{
			width: 320rpx;
			height: 90rpx;
			background: $u-type-primary;
			border-radius: 10rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 29rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #fff;
		}	
	}
	
	
	.line{
		height: 2rpx;
		background: #ECECEC;
		margin-top: -10rpx;
	}
	
	.where{
		margin: 50rpx 343rpx 90rpx;
		
	}
	.where-font{
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #AAAAAA;
		text-align: center;
	}
	.where-address{
		width: 670rpx;
		height: 90rpx;
		background: $u-type-primary;
		border-radius: 10rpx;
		margin: 256rpx auto;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
	}
	.container1{
		.white1{
			position: relative;
			width: 690rpx;
			padding-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 30rpx;
			.goods1{
				display: flex;
				.type1{
					font-size: 30rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #0F0F0E;
					margin-top: 59rpx;
					margin-left: 30rpx;
				}
				.detail1{
					display: flex;
					margin-top: 16rpx;
					margin-right: 31rpx;
					margin-left: 30rpx;
					justify-content: space-between;
					.money1{
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi;//rubick;
						font-weight: 400;
						color: #FC3E32;
					}
					.count1{
						font-size: 30rpx;
						font-family: Rubik;
						font-weight: 400;
						color: #AAAAAA;
					}
				}
			}
			.tips{
				position: absolute;
				height: 140rpx;
				width: 140rpx;
				background-image: url(../../static/biaoqian/red.png);
				background-size: 100%;
				top: 0;
				.in{
					width:144rpx;
					height: 56rpx;
					font-size: 26rpx;
					font-family: Rubik;
					font-weight: 500;
					color: #FFFFFF;
					transform: translate(-28rpx,20rpx) rotate(-45deg);
					transform-origin: center;
					text-align: center;
					display: flex;
                    align-items: center;
                    justify-content: end;
                    flex-direction: column;
				}
			}
			.gray {
				background-image: url(../../static/biaoqian/gray.png);
				background-size: 100%;
			}
		}
	}
	.product-map{
		display: flex;
		.name1{
			font-size: 34rpx;
			font-family: Rubik;
			font-weight: 500;
			color: #2B3039;
			line-height: 34rpx;
			margin: 45rpx 30rpx 28rpx 0;
		}
		.iphone1{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 30rpx;
			margin-top: 48rpx;
		}
	}
	
	.address1{
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
		padding: 0 44rpx  0 66rpx;
		word-break:break-word; 
	}
	
	
	
</style>
